<template>
    <div class="treeview" :class="className">
        <div class="tree-data"
             v-for="(item,index) in data">
            <div class="tree-row"
                 :class="{'active': isSelected(item)}"
                 @click="select(item)">
                <i class="fa"
                   :class="{'fa-folder-open-o': item.expand != undefined && item.expand == true,'fa-folder-o': item.expand != undefined && item.expand == false}"
                   @click="expandClick(index,item)"></i>
                <label>{{item[labelName]}}</label>
            </div>
            <div v-if="item.expand != undefined"
                 class="children"
                 v-show="item.expand == true">
                <div class="tree-rows">
                    <nav-tree :id="id"
                              :value="t_value"
                              :label-name="labelName"
                              :value-name="valueName"
                              :children="children"
                              :model="item[children]"
                              :parent="index"
                              class-name="inner"
                              is-expanded="true"
                              @selectID="select_id"
                    ></nav-tree>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: 'nav-tree',
        props: {
            id: {
                Type: String,
                default: 'tv_' + Math.ceil(Math.random() * 100000)
            },
            value: [String, Number, Array],
            model: {
                Type: Array,
                default: function () {
                    return [];
                }
            },
            className: {
                Type: String,
                default: ''
            },
            children: {
                Type: String,
                default: 'sub_cats'
            },
            labelName: {
                Type: String,
                default: 'label'
            },
            valueName: {
                Type: [String, Array],
                default: 'value'
            },
            parent: {
                Type: Number,
                default: undefined
            },
            isExpanded: {
                Type: Boolean,
                default: true
            },
            onSelect: {
                Type: Function
            }
        },
        data: function () {
            return {
                //data: this.model,
                t_value: this.value
            }
        },
        computed: {
            data: {
                get: function () {
                    var self = this;

                    $.map(self.model, function (t, i) {
                        if (t[self.children]) {
                            if (t[self.children].length) {
                                self.$set(self.model[i], 'expand', self.isExpanded == 'true' ? true : false);
                            }
                        }
                    });
                    return self.model;
                },
                set: function (v) {
                    this.data = v;
                }
            }
        },
        methods: {
            select: function (item) {
                if (this.valueName.constructor == Array) {
                    for (var i = 0; i < this.valueName.length; i++) {
                        if (item[this.valueName[i]] != undefined) {

                            if (item[this.valueName[i]].constructor == Array) {
                                this.t_value = item[this.valueName[i]].join();
                            } else {
                                this.t_value = item[this.valueName[i]];
                            }

                            //console.log(1,this.t_value);
                            this.$emit('selectID', this.t_value,item);
                            return;
                        }
                    }
                }

                if (this.valueName.constructor == String) {
                    this.t_value = item[this.valueName];
                    //console.log(2,this.t_value);
                    this.$emit('selectID', this.t_value,item);
                    return;
                }

            },
            select_id(s_id,item){
                this.t_value = this.s_id;
                this.$emit('selectID', s_id,item);
            },
            isSelected: function (item) {
                var rs = false;

                if (this.valueName.constructor == Array) {
                    for (var i = 0; i < this.valueName.length; i++) {
                        if (this.t_value == item[this.valueName[i]]) {
                            return true;
                        }
                    }
                }

                if (this.valueName.constructor == String) {
                    if (this.t_value == item[this.valueName]) {
                        return true;
                    }
                }
                return rs;
            },
            expandClick: function (index, item) {
                if (item.expand != undefined) {
                    return item.expand = !item.expand;
                }
            }
        },
        beforeUpdate(){
            var self = this;
            self.t_value = self.value;

        }
    }
</script>

<style lang="less">
    .treeview .tree-row:hover {
        color: #fff;
        background-color: #337ab7;
    }

    .treeview .tree-row.active {
        background-color: #23b7e5;
        color: #FFF;
    }

    .treeview {
        position: relative;
        overflow: auto;
    }

    .treeview.inner {
        border: none;
        height: auto;
        max-height: none;
        padding-left: 20px;
    }

    .treeview .tree-row {
        border-radius: 4px;
        //display: inline-block;
    }

    .treeview .children {
        overflow: hidden;
    }

    .treeview .children .margin {
        display: inline-block;
        width: 20px;
    }

    .treeview span.icon {
        width: 20px;
        display: inline-block;
        text-align: center;
    }

</style>
